
import * as PIXI from 'pixi.js';
import Circle from 'components/circle';
import Text from 'components/text';
import Rect from 'components/rect';
const { Container } = PIXI;

export default class BeginGame {
  constructor({parent, ...props}) {

    this.parent = parent;
    this.container = new Container();

    this._renderText(props);
    this._renderIcon(props);

    this.container.y = props.top;
    this.container.x = (this.parent.container.width - this.container.width) / 2;
  }

  _renderText = (data) => {
    const { color, fontSize, lineHeight, text } = data;

    let textMod = new Text({
      top: 0,
      left: lineHeight * 1.5,
      value: text,
      fill: color,
      fontSize, lineHeight,
    });

    let line = new Rect({
      top: lineHeight,
      left: lineHeight * 1.5 - 4,
      width: textMod.width + 8,
      height: 2,
      fill: color,
    });

    this.container.addChild(textMod);
    this.container.addChild(line);
  };

  _renderIcon = (data) => {
    const { color, lineHeight, fontSize } = data;

    let textMod = new Text({
      top: 2,
      left: (fontSize - 4) / 2,
      value: 'i',
      fill: color,
      fontSize: fontSize - 4,
      lineHeight: lineHeight,
    });

    let circle = new Circle({
      top: (lineHeight - fontSize) / 4,
      left: 0,
      radius: fontSize / 2,
      borderWidth: 2,
      borderColor: color,
    });

    this.container.addChild(textMod);
    this.container.addChild(circle);
  };

}
